<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>歌曲修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet"
          href="css/font.css">
    <link rel="stylesheet"
          href="css/index.css">
    <script src="lib/layui/layui.js"
            charset="utf-8"></script>
    <script type="text/javascript"
            src="js/index.js"></script>
    <script type="text/javascript"
            src="js/jquery.js"></script>
    <script type="text/javascript"
            src="js/jquery-form.js"></script>

    <!--<style>
            .imgs{display: none;}
            .picture{display: none;}
        </style>-->


</head>
<body>

<div class="layui-card">
    <form class="layui-form layui-form-pane"
          action="../../song/updateSong"
          id="update-form" method="post">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
            </ul>

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!--<form class="layui-form layui-form-pane" action="" id="add">-->
                    <input type="hidden" name="op" value="update">

                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>歌曲编号
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="songId" autocomplete="off" value=""
                                   class="layui-input" required="required" readonly="readonly">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>歌曲名字
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="songName" autocomplete="off" value=""
                                   placeholder="" class="layui-input" required="required" readonly="readonly">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>歌曲状态
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="songStatus" autocomplete="off" value=""
                                   placeholder="" class="layui-input" required="required">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>歌手时长
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="songDuration" autocomplete="off" value=""
                                   placeholder="" class="layui-input" required="required">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>歌手名字
                        </label>
                        <div class="layui-input-block">
                            <select name="singerId" id="singerId" lay-search>
                                <option >---请选择歌手名字---</option>
                                <option value="1">周杰伦</option>
                                <option value="2">潘玮柏</option>
                                <option value="3">阿悠悠</option>
                                <option value="4">五月天</option>
                                <option value="5">Alan Walker</option>
                                <option value="6">房东的猫</option>
                                <option value="7">队长</option>
                                <option value="8">罗文</option>
                                <option value="9">久石让 (ひさいし じょう)</option>
                                <option value="10">Sam Ock (샘 옥)</option>
                                <option value="11">Maksim</option>
                                <option value="12">Taylor Swift</option>
                                <option value="13">Eric Clapton</option>
                                <option value="14">苏星婕</option>
                                <option value="15">陈奕迅</option>
                                <option value="16">邓紫棋</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>专辑名称
                        </label>
                        <div class="layui-input-block">
                            <select name="albumId" id="albumId" lay-search>
                                <option >---请选择歌曲专辑---</option>
                                <option value="1">哪里都是你</option>
                                <option value="2">叶惠美</option>
                                <option value="3">Mojito</option>
                                <option value="4">我是如此相信</option>
                                <option value="5">周杰伦地表最强世界巡回演唱会</option>
                            </select>
                        </div>
                    </div>

                    <!--<div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>管理员权限编号
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="jurisdictionId" autocomplete="off"
                                value="" placeholder="" class="layui-input" required = "required">
                        </div>
                    </div>-->

                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label"> <span class='x-red'>*</span>封禁
                        </label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="saleStatus" title="封禁">
                        </div>
                    </div> -->

                    <!-- <div class="layui-form-item">
                        <label for="link" class="layui-form-label"> <span
                            class="x-red">*</span>商品图片
                        </label>
                        <div class="layui-input-inline">
                            <div class="site-demo-upbar">
                            <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>

                        </div>
                            <input type="file" name="goodsImage" id="goodsimage">
                        </div>

                    </div> -->
                    <!-- <div class="layui-form-item imgs" id="imgshow">
                        <label class="layui-form-label">商品展示 </label> <img src=""
                            id="pimages" name="pimages" style="width: 400px; height: 200px;" />
                        <input id="avatar" name="image" required="" type="hidden"
                            value="images">
                    </div> -->


                    <div class="layui-form-item">
                        <button class="layui-btn" type="submit">修改歌手</button>
                    </div>
                    <!--</form>-->
                    <div style="height: 100px;"></div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
</script>

<script>
    //获取请求路径上携带的管理员信息
    let songId = getUrlParams("songId");
    let songName = getUrlParams("songName");
    let songStatus = getUrlParams("songStatus");
    let songDuration = getUrlParams("songDuration");
    let singerId = getUrlParams("singerId");
    let albumId = getUrlParams("albumId");
    //发起异步请求单个管理员信息
    /* $.post("../../admin/updateAdmin",{adminPhone:adminPhone},function(result,status,xhr){
     //获取管理员信息，填充到指定dom元素上
     let adminName = result.data.adminName;
     let adminPhone = result.data.adminPhone;
     let adminPassword = result.data.adminPassword;*/
    $("input[name='songId").val(songId);
    $("input[name='songName").val(songName);
    $("input[name='songStatus").val(songStatus);
    $("input[name='songDuration").val(songDuration);
    $("input[name='singerId").val(singerId);
    $("input[name='albumId").val(albumId);
    function getUrlParams(name) {
        //去除函数
        String.prototype.trim = function (char, type) {
            if (char) {
                if (type == 'left') {
                    return this.replace(new RegExp('^\\' + char + '+', 'g'), '');
                } else if (type == 'right') {
                    return this.replace(new RegExp('\\' + char + '+$', 'g'), '');
                }
                return this.replace(new RegExp('^\\' + char + '+|\\' + char + '+$', 'g'), '');
            }
            return this.replace(/^\s+|\s+$/g, '');
        };
        var newArray = new Array();
        var searchUrl = window.location.search;//用法看底下
        searchUrl = searchUrl.trim('?', 'left');
        // searchUrl.trim('?','left');  left 去除
        // searchUrl.trim('?','right');  right 去除
        if (searchUrl != null) {
            var searchData = searchUrl.split("&");//截取 url中的“&”,获得“=”后面的参数
            if (searchData.length > 0) {
                $.each(searchData, function (index, key) {
                    newArray[key.split("=")[0]] = decodeURI(key.split("=")[1]);
                })
                if (newArray[name] == undefined || newArray[name] == null || newArray[name] == '') {
                    return null;
                } else {
                    return newArray[name];
                }
            } else {
                return null;
            }
        } else {
            return null;
        }
    }

    select();
    function select() {
        //异步请求专辑名字
        $.ajax({
            async: true,
            type: "get",
            url: "/album/all",
            data: {},
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function (result, status, xhr) {
                var album = "<option value=\"0\">---请选择专辑名字---</option>";
                if (result.data != null) {
                    $.each(result.data, function (i, obj) {
                        album += "<option value=\"" + obj.albumId + "\">" + obj.albumName + "</option>";
                    })
                    $("#albumId").html(album);
                }
                $("#albumId option").each(function(index){
                    if(this.text == albumId){
                        this.selected=true;
                    }
                });
            }
        });


        //异步请求歌手名字
        $.ajax({
            async: true,
            type: "get",
            url: "/Singer/list",
            data: {},
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function (result, status, xhr) {
                var singer = "<option value=\"0\">---请选择歌手名字---</option>";
                if (result.data != null) {
                    $.each(result.data, function (i, obj) {
                        singer += "<option value=\"" + obj.singerId + "\">" + obj.singerName + "</option>";
                    })
                    $("#singerId").html(singer);
                }
                $("#singerId option").each(function(index){
                    if(this.text == singerId){
                        this.selected=true;
                    }
                });
            }
        });


        /*});*/
        //对指定的表单绑定提交事件
        $("#update-form").submit(function () {
            //使用jQuery.form.js插件方法ajaxSubmit()异步提交表单
            $(this).ajaxSubmit(function (result) {
                layui.use('layer', function () {
                    if (result.status != 0) {
                        //证明商品修改成功
                        layer.msg(result.message, {
                            icon: 1,
                            time: 3000
                        });
                        //定时器
                        window.setTimeout(function () {


                            //关闭子窗口
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            //调用首页的查询方法
                            window.parent.operate();

                        }, 3000);
                    } else {
                        //证明商品修改失败
                        layer.msg(result.message, {
                            icon: 5,
                            time: 3000
                        });
                    }
                });
            });
            //限制默认的表单
            return false;
        });


    }
</script>

</body>
</html>